<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>我的成就</span>
      </div>
    </template>
    <el-table :data="appObject.tableData" style="width: 100%" :show-header="false">
      <el-table-column prop="achName" label="成就名称" width="180" />
      <el-table-column prop="score" label="积分" width="180" />
    </el-table>
  </el-card>
</template>

<script setup>
  import {
    reactive
  } from 'vue'
  
  import userStore from '../store/user.js'
  import { getAchievements } from '../http/userApi.js'
  
  const uStore = userStore()
  
  const appObject = reactive({
    tableData: []
  })
  
  const initData = () => {
    getAchievements(uStore.getUserId).then(res => {
      res = res.data
      appObject.tableData = res.data
    })
  }
  initData()
  
</script>

<style scoped>
</style>